<html>
  <head>
    <title>modal | riot-component</title>
    <link rel="stylesheet" href="../modal/style.css">
  </head>
  <body>



    <modal-demo/>

    <!-- 规范：调用组件时 控制语句放第一位，ref放第二，传参随后 -->
    <script type="riot/tag">
      <modal-demo>

        <h2>
          <a href="javascript:;" onclick={ev.openModal}>打开普通弹窗</a>
        </h2>

        <modal ref="m1" w={500} h={300}>
          <yield to="title">hello</yield>
          <yield to="content">
            这里放的是弹窗里的内容
          </yield>
          <yield to="button">
            <button type="button" onclick={parent.ev.openModalChild}>再打开一个</button>
          </yield>
          <yield to="close">
            关闭弹窗
          </yield>
        </modal>

        <modal ref="m2" top="33%" mask="0">
          <yield to="title">hello world</yield>
          <yield to="content">
            这里放的是弹窗里的内容...第二个
          </yield>
          <yield to="close">
            关闭
          </yield>
        </modal>

        tag = this;

        tag.ev = {
          openModal: function(){
            tag.refs.m1.ev.open()
          },
          openModalChild: function(){
            tag.refs.m2.ev.open()
          }
        }

        tag.on('mount', function(){

        })

      </modal-demo>
    </script>

    <script src='https://unpkg.com/riot@3.3.2/riot+compiler.min.js'></script>
    <script src="../modal/component.js"></script>
    <script>
      riot.mount('modal-demo');
    </script>
  </body>
</html>
